<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import { fontScale } from '../../../utils/index'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef<Record<string, any>>();
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const getBaseOptions = () => {
  return {
    color: ['#02D9FF', '#23EBC2'],
    tooltip: {
      // backgroundColor: '#007CA4',
      // borderColor: '#007CA4',
      // textStyle: {
      //   color: '#fff'
      // },
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        if(params[0]){
          let str = params[0].name +'<br>'
          // debugger
          params.forEach((item,index)=>{
            str+= item.marker + item.seriesName +Math.abs(item.value)+ ' 处' +'<br>'
          })
          return str
        }
        // return (
        //   params[0].name +
        //   '<br>' +
        //   params[0].marker +
        //   '上月：' +
        //   -params[0].value +
        //   ' 处' +
        //   '<br>' +
        //   params[1].marker +
        //   '本月：' +
        //   params[1].value +
        //   ' 处'
        // )
      }
    },
    legend: {
      top: '10%',
      data: ['上月', '本月'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '1%',
      right: '1%',
      top: '30%',
      bottom: '1%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        axisLine: { show: false },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#fff',
          fontSize:16*fontScale
        },
        axisLine: { show: false },
        axisTick: { show: false },
        data: ['']
      }
    ],
    series: [
      {
        name: '上月',
        type: 'bar',
        barWidth: '10%',
        stack: '总量',
        label: {
          show: true,
          formatter: function (params) {
            return params.value
          }
        },
        data: [-30]
      },
      {
        name: '本月',
        type: 'bar',
        barWidth: '10%',
        stack: '总量',
        label: {
          show: true
        },
        data: [25]
      }
    ]
  }as Record<string, any>;
}
watch(
  () => props.data,
  (newV) => {
    const option = getBaseOptions()
    option.yAxis[0].data = [newV.name]
    option.series[0].data = [newV.data[0]]
    option.series[1].data = [newV.data[1]]
    options.value = option
  },
  {deep:true}
)
// onMounted(() => {
//   nextTick(() => {
//     debugger
//     console.log(props.data)
//     const option = getBaseOptions()
//     options.value = option
//   })
// })
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 2.7rem;
}
</style>
